<template>
  <div class="stats-container">
    <div class="control-panel">
      <el-radio-group v-model="currentView" @change="handleViewChange">
        <el-radio-button label="poems">诗文数量</el-radio-button>
        <el-radio-button label="quotes">名句数量</el-radio-button>
      </el-radio-group>
    </div>
    <div class="stats-content" ref="statsChart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'PoetStats',
  data() {
    return {
      chart: null,
      currentView: 'poems',
      poetData: [
        { name: '李白', poems: 1127, quotes: 5980, title: '太白', alias: '青莲居士' },
        { name: '白居易', poems: 2989, quotes: 1887, title: '乐天', alias: '香山居士' },
        { name: '杜甫', poems: 1338, quotes: 2726, title: '子美', alias: '少陵野老' },
        { name: '苏轼', poems: 3787, quotes: 4813, title: '子瞻', alias: '东坡居士' },
        { name: '辛弃疾', poems: 838, quotes: 1692, title: '幼安', alias: '稼轩' },
        { name: '李清照', poems: 88, quotes: 632, title: '易安', alias: '易安居士' },
        { name: '刘禹锡', poems: 801, quotes: 591, title: '梦得', alias: '无' },
        { name: '王维', poems: 415, quotes: 886, title: '摩诘', alias: '摩诘居士' },
        { name: '李商隐', poems: 604, quotes: 860, title: '义山', alias: '玉溪生' },
        { name: '杜牧', poems: 528, quotes: 445, title: '牧之', alias: '樊川居士' },
        { name: '陆游', poems: 10237, quotes: 1138, title: '务观', alias: '放翁' },
        { name: '陶渊明', poems: 137, quotes: 1325, title: '潜', alias: '元亮' },
        { name: '王安石', poems: 1921, quotes: 757, title: '介甫', alias: '半山' },
        { name: '黄庭坚', poems: 2547, quotes: 559, title: '鲁直', alias: '山谷道人' }
      ]
    }
  },
  mounted() {
    this.initChart()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    this.chart && this.chart.dispose()
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.statsChart)
      this.updateChart()
    },
    updateChart() {
      const data = this.poetData
        .sort((a, b) => b[this.currentView === 'poems' ? 'poems' : 'quotes'] - a[this.currentView === 'poems' ? 'poems' : 'quotes'])
        .slice(0, 10)

      const option = {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: (params) => {
            const data = params[0].data
            return `${data.name}（${data.title}）<br/>
                    ${this.currentView === 'poems' ? '诗文' : '名句'}数：${data[this.currentView === 'poems' ? 'poems' : 'quotes']}<br/>
                    号：${data.alias}`
          },
          backgroundColor: 'rgba(255, 123, 0, 0.9)',
          borderColor: '#ff9e45',
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          axisLabel: {
            color: '#ff7b00'
          }
        },
        yAxis: {
          type: 'category',
          data: data.map(item => item.name),
          axisLabel: {
            color: '#ff7b00'
          }
        },
        series: [
          {
            type: 'bar',
            data: data.map(item => ({
              ...item,
              value: item[this.currentView === 'poems' ? 'poems' : 'quotes']
            })),
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#ff7b00' },
                { offset: 1, color: '#ff9e45' }
              ])
            }
          }
        ]
      }
      this.chart.setOption(option)
    },
    handleViewChange() {
      this.updateChart()
    },
    handleResize() {
      this.chart && this.chart.resize()
    }
  }
}
</script>

<style scoped>
.stats-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: rgba(255, 123, 0, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  overflow: hidden;
}

.control-panel {
  padding: 15px 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
  background-color: rgba(255, 158, 69, 0.1);
  border-bottom: 1px solid rgba(255, 158, 69, 0.2);
}

.stats-content {
  flex: 1;
  width: 100%;
  height: calc(100% - 60px);
}

:deep(.el-radio-button__inner) {
  background-color: transparent;
  border-color: #ff7b00;
  color: #ff7b00;
}

:deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
  background-color: #ff7b00;
  border-color: #ff7b00;
  box-shadow: -1px 0 0 0 #ff7b00;
}
</style> 